<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left;
				margin-right: 50px;  /*图片与文字连接处间隙*/
				margin-bottom: 50px; /*图片与文字连接处间隙*/
			}
			p{
				font-size:16px; /* 页面默认字体尺寸 */
				line-height: 20px; /* 浮动文字，行高无法设定 */
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/柔柔4.png" alt="柔柔" width="250px" height="250px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus deleniti aperiam recusandae atque magni quae quod reiciendis repudiandae temporibus sed corrupti, exercitationem maiores? Fugiat quis aperiam reiciendis. Eaque, animi repellendus! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum provident expedita magni explicabo est blanditiis pariatur ducimus laboriosam? A tempora nam exercitationem aliquid sequi laboriosam! Unde sed aperiam quaerat officia. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta sapiente perferendis quas autem perspiciatis, libero nesciunt, non ad architecto impedit nihil aspernatur ut. Labore, ullam ab aliquid velit alias eius.</p>
	</body>
</html>